<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from "@element-plus/icons-vue";
import { onMounted, computed, watch } from "vue-demi";
import store from "../../store";
import { ref, shallowRef } from "vue-demi";
import { Course } from "../../model/resource";
import router from "../../route";
import { onBeforeRouteUpdate } from "vue-router";
import { rand } from "@vueuse/shared"
import Search from "../../components/Search.vue";
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
    console.log(key, keyPath);
};
const refMenu = ref() // 菜单组件的引用
// store.commit('changeStage', {name: 'course'})
const data = ref([])
const onResourceItem = async (e) => {
    console.log(e)
    store.commit('resetRouter')// 整体清空一次路由记录
    let index = e.index;
    if (index == 11) {
        // data.value = (await new Course().gets()).courses
        store.commit('changeStage', {
            name: 'course'
        })
    } else if (index == 12) {
        store.commit('changeStage', {
            name: 'chapter'
        })
    } else if (index == 13) {
        store.commit('changeStage', {
            name: 'video'
        })
    } else {
        console.log("出阿里的");
    }
    // data.value = (await store.state.router_data.get())
};

onMounted(() => {
    store.commit('show', 'menu')
    onResourceItem({ index: 11 })
})
// 菜单显示
const default_active = '11'
// ============================= Continue ====================================
// 切换对应的stage
function onUploadItem(e) {
    store.commit('resetRouter')
    store.commit('changeStage', 'upload')
}

function onSetItem(e) {
    store.commit('resetRouter')
    store.commit('changeStage', 'set')
}

const show_empty = computed(() => store.state.show.empty)
const show_backTab = computed(() => store.state.show.backTab)
const show_menu = computed(() => store.state.show.menu)
function onToUploadButton(){
    store.commit('changeStage', 'upload')
    console.log("refMenu", refMenu.value)
}

function onBack() {
    router.go(-1)
}
// onBeforeRouteUpdate((to, from, next) => {
//     console.log("更新的", to, from , next)
//     next()
// })

</script>


<template>

    <div class="container">
        <el-col class="menu-container" v-show="show_menu">
            <el-menu   ref="refMenu" :default-active="default_active" :router="false" :collapse="false" class="el-menu-vertical"
                @open="handleOpen" @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>资源查看</span>
                    </template>

                    <el-menu-item @click="onResourceItem" class="el-menu-item" index="11">课程</el-menu-item>
                    <el-menu-item @click="onResourceItem" class="el-menu-item" index="12">章节</el-menu-item>
                    <el-menu-item @click="onResourceItem" class="el-menu-item" index="13">视频</el-menu-item>
                </el-sub-menu>

                <el-menu-item index="2" @click="onUploadItem">
                    <el-icon>
                        <Upload />
                    </el-icon>
                    <span>资源上传</span>
                </el-menu-item>
                <el-menu-item index="3" @click="onSetItem">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>设置</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <!-- <el-col class="catalog-container" v-show="show.catalog">
            <Catalog></Catalog>
        </el-col> -->
        <div class="stage-container">
            <el-page-header v-show="show_backTab" @back="onBack" title="返回" content="" />
            <router-view></router-view>
            <el-empty v-show="show_empty" description="还没有上传该资源，快去上传吧！">
                <el-button round @click="onToUploadButton" type="primary" >去上传</el-button>
            </el-empty>
        </div>
    </div>
</template>



<style language="scss" scoped>
.container {
    display: flex;
    flex-direction: row;
}

.menu-container {
    flex: 0.5;
}

.catalog-container {
    flex: 1;

}

.el-menu-vertical {
    width: 150px;
}

.el-menu-item {
    width: 100% !important;
    min-width: 0 !important;
}

.stage-container {
    flex: 8;
    background: #e8fff8;
    width: 100%;
    width: 500px;
    padding: 10px;
    height: 100%;
    min-height: 720px;
}
</style>